<template>
  <view class="app-container">
    <slot />
    <!-- H5 使用 BottomTabbar，小程序使用原生 tabbar -->
    <bottom-tabbar v-if="showTabbar && isH5" />
  </view>
</template>

<script setup>
import BottomTabbar from './components/BottomTabbar.vue';
import { computed } from 'vue';

const isH5 = process.env.UNI_PLATFORM === 'h5';

// 动态显示 tabbar
const showTabbar = computed(() => {
  const pages = getCurrentPages();
  const route = pages[pages.length - 1]?.route || '';
  return [
    'pages/home/index',
    'pages/exercise/index',
    'pages/community/index',
    'pages/eye/index',
    'pages/mine/index',
  ].includes(route);
});
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
  /* H5 使用 BottomTabbar，小程序原生 tabbar无需底距 */
  padding-bottom: 70rpx;
  overflow-x: hidden;
}
</style>
